<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var $block \Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery\Content */
$elementName = $block->getElement()->getName() . '[images]';
?>
<div class="row">
    <div class="add-video-button-container">
        <button id="add_video_button"
                title="<?php echo $block->escapeHtml(__('Add Video'));?>"
                data-role="add-video-button"
                type="button"
                class="action-secondary"
                data-mage-init='{"openVideoModal" : {}}'
                data-ui-id="widget-button-1">
            <span><?php /* @escapeNotVerified */ echo __('Add video') ?></span>
        </button>
    </div>
</div>
<div id="<?php /* @escapeNotVerified */ echo $block->getHtmlId() ?>"
     class='gallery'
     data-mage-init='{"productGallery":{"template":"#<?php
     /* @escapeNotVerified */ echo $block->getHtmlId() ?>-template"}}'
     data-images="<?php /* @escapeNotVerified */ echo $block->escapeHtml($block->getImagesJson()) ?>"
     data-types="<?php /* @escapeNotVerified */ echo $block->escapeHtml(
         $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($block->getImageTypes())
     ) ?>"
    >
    <?php
    if (!$block->getElement()->getReadonly()) {
        ?>
        <div class="image image-placeholder">
            <?php /* @escapeNotVerified */ echo $block->getUploaderHtml();
            ?>
            <img class="spacer"
                 src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/spacer.gif')?>"/>
            <p class="image-placeholder-text">
                <?php /* @escapeNotVerified */ echo __('Click here or drag and drop to add images.');
                ?></p>
        </div>
        <?php /* @escapeNotVerified */ echo $block->getChildHtml('additional_buttons'); ?>
        <?php
    }
    ?>
    <?php
    foreach ($block->getImageTypes() as $typeData) {
        ?>
        <input name="<?php /* @escapeNotVerified */ echo $block->escapeHtml($typeData['name']) ?>"
               class="image-<?php /* @escapeNotVerified */ echo $block->escapeHtml($typeData['code']) ?>"
               type="hidden"
               value="<?php /* @escapeNotVerified */ echo $block->escapeHtml($typeData['value']) ?>"/>
        <?php
    }
    ?>
    <script id="<?php /* @escapeNotVerified */ echo $block->getHtmlId() ?>-template" type="text/x-magento-template">
        <div class="image item <% if (data.disabled == 1) { %>hidden-for-front<% } %>"
             data-role="image">
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][position]"
                   value="<%- data.position %>"
                   class="position"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][media_type]"
                   value="<%- data.media_type %>"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][video_provider]"
                   value="<%- data.video_provider %>"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][file]"
                   value="<%- data.file %>"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][value_id]"
                   value="<%- data.value_id %>"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][label]"
                   value="<%- data.label %>"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][disabled]"
                   value="<%- data.disabled %>"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][removed]"
                   value="" class="is-removed"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][video_url]"
                   value="<%- data.video_url %>"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][video_title]"
                   value="<%- data.video_title %>"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][video_description]"
                   value="<%- data.video_description %>"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][video_metadata]"
                   value="<%- data.video_metadata %>"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][role]"
                   value="<%- data.video_description %>"/>
            <ul class="type-labels" style="display: none">
                <?php
                foreach ($block->getImageTypes() as $typeData) {
                    ?>
                    <li class="type-<?php /* @escapeNotVerified */ echo $block->escapeHtml(
                        $typeData['code']
                    ) ?>"><?php /* @escapeNotVerified */ echo $block->escapeHtml($typeData['label']) ?></li>
                    <?php
                }
                ?>
            </ul>
            <img class="spacer"
                 src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/spacer.gif')?>"/>
            <img class="product-image" src="<%- data.url %>" alt="<%- data.label %>"/>
            <div class="actions" >
                <button type="button"
                        class="action-delete"
                        data-role="delete-button"
                        title="<% if (data.media_type == 'external-video') {%>
                            <?php /* @escapeNotVerified */ echo __('Delete video') ?>
                        <%} else {%>
                            <?php /* @escapeNotVerified */ echo __('Delete image') ?>
                        <%}%>">
                    <span>
                        <% if (data.media_type == 'external-video') { %>
                            <?php /* @escapeNotVerified */ echo __('Delete video') ?>
                        <% } else {%>
                            <?php /* @escapeNotVerified */ echo __('Delete image') ?>
                        <%} %>
                    </span >
                </button>
                <button type="button"
                        class="action-make-base"
                        data-role="make-base-button"
                        title="<?php /* @escapeNotVerified */ echo __('Make Base') ?>">
                    <span><?php /* @escapeNotVerified */ echo __('Make Base') ?></span >
                </button >
                <div class="draggable-handle" ></div >
            </div >
            <div class="image-label"></div>
            <div class="image-fade"><span><?php /* @escapeNotVerified */ echo __('Hidden') ?></span></div>
        </div>
    </script>
    <script class="dialog-template" type="text/x-magento-template"  data-title="Image Options">
            <div class="image-panel admin__scope-old ui-tabs-panel ui-widget-content ui-corner-bottom"
                 data-role="dialog"
                 style="display: block">
                <div class="image-panel-preview">
                    <img src="<%- data.url %>" alt="<%- data.label %>" />
                </div>
                <div class="image-panel-controls">
                    <strong class="image-name"><%- data.label %></strong>

                    <fieldset class="fieldset fieldset-image-panel">
                        <div class="field field-image-description">
                            <label class="label" for="image-description">
                                <span><?php /* @escapeNotVerified */ echo __('Alt Text')?></span>
                            </label>
                            <div class="control">
                                <textarea id="image-description"
                                          rows="3"
                                          name="<?php /* @escapeNotVerified */
                                          echo $elementName
                                          ?>[<%- data.file_id %>][label]"><%- data.label %></textarea>
                            </div>
                        </div>

                        <div class="field field-image-role">
                            <label class="label">
                                <span><?php /* @escapeNotVerified */ echo __('Role')?></span>
                            </label>
                            <div class="control">
                                <ul class="multiselect-alt">
                                    <?php
                                    foreach ($block->getMediaAttributes() as $attribute) :
                                        ?>
                                        <li class="item">
                                            <label>
                                                <input class="image-type"
                                                       data-role="type-selector"
                                                       type="checkbox"
                                                       value="<?php /* @escapeNotVerified */ echo $block->escapeHtml(
                                                           $attribute->getAttributeCode()
                                                       ) ?>"
                                                    />
                                                <?php /* @escapeNotVerified */ echo $block->escapeHtml(
                                                    $attribute->getFrontendLabel()
                                                ) ?>
                                            </label>
                                        </li>
                                    <?php
                                    endforeach;
                                    ?>
                                </ul>
                            </div>
                        </div>

                        <div class="field field-image-hide">
                            <label class="label">
                                <input type="checkbox"
                                       data-role="visibility-trigger"
                                       value="1"
                                       name="<?php /* @escapeNotVerified */
                                       echo $elementName
                                       ?>[<%- data.file_id %>][disabled]"
                                <% if (data.disabled == 1) { %>checked="checked"<% } %> />
                                <span><?php /* @escapeNotVerified */ echo __('Hide from Product Page')?></span>
                            </label>
                        </div>
                    </fieldset>
                </div>
            </div>
    </script>
</div>
